








// <!-- 需求分析：
// 1、页面布局
// 2、确定操作对象，
//     左边大盒子，
//     右边大盒子中图片，
//     蒙版层
// 3、确定事件类型：onmouseover、onmouseout、onmousemove
// 4、给大盒子对象分别绑定则三个事件
//     鼠标移入移出时，就显示或隐藏蒙版层和右边大盒子对象
// 5、计算蒙版层的移动距离
//     光标相对于页面的坐标-左边大盒子相对于页面的偏移量-蒙版层的二分之一
// 6、设置蒙版层的边界条件
// 6、计算右边图片的移动距离
//     (右边图片的最大偏移量/蒙版层的最大偏移量)*蒙版层的移动距离
// -->



//创建构造函数
function Fdj(ele){
    //把大盒子中需要操作的元素获取，并赋值给实例属性
    this.box1=ele.querySelector('.box1')
    this.mark=ele.querySelector('.mark')
    this.box2=ele.querySelector('.box2')
    this.img2=this.box2.querySelector("img")
    
    
    
    //调用入口函数
    this.init()
}
// var lis=document.querySelectorAll("li")
//在原型空间中创建入口函数
Fdj.prototype.init=function(){
    //显示和隐藏
    this.showHide()
    //移动
    this.move()
}
//创建函数，让蒙版层和右边盒子显示和隐藏
Fdj.prototype.showHide=function(){
    //给左边大盒子绑定鼠标移入移出事件
    this.box1.onmouseover=()=>{
        //显示
        this.mark.style.display='block'
        this.box2.style.display='block'
    }
    //隐藏
    this.box1.onmouseout=()=>{
        this.mark.style.display='none'
        this.box2.style.display='none'
    }
}
Fdj.prototype.move=function(){
    //给左边大盒子对象绑定鼠标移动事件
    this.box1.onmousemove=(e)=>{
        var e = e || window.event
        //获取移动距离
        var left1=e.pageX-this.box1.offsetLeft-parseInt(this.mark.offsetWidth/2)
        var top1=e.pageY-this.box1.offsetTop-parseInt(this.mark.offsetHeight*2)
        //设置边界条件
        var maxX=this.box1.offsetWidth-this.mark.offsetWidth
        var maxY=this.box1.offsetHeight-this.mark.offsetHeight
        //右边图片的移动距离
        var imgX,imgY
        //判断边界条件
        if(left1<0){
            this.mark.style.left="0px"
            imgX=0
        }else if(left1>maxX){
            this.mark.style.left=maxX+'px'
            imgX=maxX
        }else{
            this.mark.style.left=left1+'px'
            imgX=left1
        }

        //垂直方向
        if(top1<0){
            this.mark.style.top="0px"
            imgY=0
        }else if(top1>maxY){
            this.mark.style.top=maxY+'px'
            imgY=maxY
        }else{
            this.mark.style.top=top1+'px'
            imgY=top1
        }
        //计算移动比例
        var x1=(this.img2.offsetWidth-this.box2.offsetWidth)/(this.box1.offsetWidth-this.mark.offsetWidth)
        var y1=(this.img2.offsetHeight-this.box2.offsetHeight)/(this.box1.offsetHeight-this.mark.offsetHeight)
        //让右边图片进行移动
        this.img2.style.left=-x1*imgX+'px'
        this.img2.style.top=-y1*imgY+'px'
    }
}

 
//获取操作对象
var boxs=document.querySelector('.boxs')
//实例化对象
new Fdj(boxs)


var ul=document.querySelector("._body_left_top") 
var box1=document.querySelector(".box1")
// var mark=document.querySelector('.mark')
var box2=document.querySelector(".box2")
var box2Img=box2.querySelector('img')
var ul1=ul.querySelector(".ul_1")
var lis=ul1.querySelectorAll("li")
for(var i=0;i<lis.length;i++){
    //给每个li对象绑定点击事件
    lis[i].onclick=function(){
        //清除所有li对象中的class属性
        // for(var j=0;j<lis.length;j++){
        //     lis[j].className=''
        // }
        //获取当前li对象中img的图片地址
        var url=this.lastElementChild.getAttribute('src')
        console.log(url)
        //把当前图片地址赋值给上面的图片
        box1.firstElementChild.setAttribute('src',url)
        box2.firstElementChild.setAttribute('src',url)
        //给当前点击的li对象添加class属性
        // this.className='bd'
    }
}


